// 自定义服务节点
const {ObjectExt} = require('@antv/x6')

function createServiceNode() {
    const wrap = document.createElement('div')
    wrap.style.width = '100%'
    wrap.style.height = '100%'
    wrap.style.display = 'flex'
    wrap.style.flexDirection = 'column'
    wrap.style.alignItems = 'center'
    wrap.style.justifyContent = 'center'
    wrap.style.position = 'relative'
    wrap.style.backgroundColor = 'white'
    const topRect = document.createElement('div')
    topRect.style.width = '100%'
    topRect.style.height = '25%'
    topRect.style.border = '2px solid #000'
    topRect.style.borderTopLeftRadius = '10px'
    topRect.style.borderTopRightRadius = '10px'
    topRect.style.display = 'flex'
    topRect.style.justifyContent = 'center'
    topRect.style.alignItems = 'center'
    topRect.style.fontSize = '14px'
    topRect.className = 'topRect'
    const midRect = document.createElement('div')
    midRect.style.width = '100%'
    midRect.style.height = '50%'
    midRect.style.borderLeft = '2px solid #000'
    midRect.style.borderRight = '2px solid #000'
    const bottomRect = document.createElement('div')
    bottomRect.style.width = '100%'
    bottomRect.style.height = '25%'
    bottomRect.style.border = '2px solid #000'
    bottomRect.style.borderBottomLeftRadius = '10px'
    bottomRect.style.borderBottomRightRadius = '10px'
    wrap.appendChild(topRect)
    wrap.appendChild(midRect)
    wrap.appendChild(bottomRect)
    return wrap
}
function createSelfServiceNode() {
    const wrap = createServiceNode()
    const self = document.createElement('div')
    self.style.width = '50%'
    self.style.height = '50%'
    self.style.border = '2px solid #000'
    self.style.borderRadius = '50%'
    self.style.position = 'absolute'
    self.style.left = '25%'
    self.style.top = '-10%'
    self.style.zIndex = '-99'
    const self2 = document.createElement('div')
    self2.style.width = '30%'
    self2.style.height = '30%'
    self2.style.border = '2px solid #000'
    self2.style.borderRadius = '50%'
    self2.style.position = 'absolute'
    self2.style.left = '35%'
    self2.style.top = '-5%'
    self2.style.zIndex = '-100'
    wrap.appendChild(self)
    wrap.appendChild(self2)
    return wrap
}
function createCircleNode() {
    const circle = document.createElement('div')
    circle.style.borderRadius = '50%'
    circle.style.border = '2px solid #000'
    circle.style.width = '100%'
    circle.style.height = '100%'
    circle.style.display = 'flex'
    circle.style.justifyContent = 'center'
    circle.style.alignItems = 'center'
    circle.style.fontSize = '14px'
    circle.className = 'circle-node'
    circle.style.backgroundColor = 'white'
    return circle
}
function createProducerNode() {
    return {
        inherit: 'rect',
        width: 200,
        height: 60,
        markup: [
            {
                tagName: 'path',
                selector: 'body'
            },
            {
                tagName: 'text',
                selector: 'label',
            }
        ],
        attrs: {
            body: {
                d: 'M 0 0 L 20 0 L 30 10 L 20 20 L 0 20 L 0 0 Z',
                strokeWidth: 1.5,
                stroke: '#000',
                fill: '#fff',
            },
            label: {
                fontSize: 14,
                fill: '#000',
                refX: '10%',
                refY: '-50%',
                textAnchor: 'middle',
                textVerticalAnchor: 'middle',
                label: ' '
            }
        },
        propHooks(metadata) {
            const { label, ...others } = metadata
            if (label) {
                ObjectExt.setByPath(others, 'attrs/text/text', label)
            }
            return others
        }
    }
}

function createConsumerNode() {
    return {
        inherit: 'rect',
        width: 200,
        height: 60,
        markup: [
            {
                tagName: 'path',
                selector: 'body'
            },
            {
                tagName: 'text',
                selector: 'label',
            }
        ],
        attrs: {
            body: {
                d: 'M 0 0 L 30 0 L 30 20 L 0 20 L 10 10 L 0 0 Z',
                strokeWidth: 1.5,
                stroke: '#000',
                fill: '#fff',
            },
            label: {
                fontSize: 14,
                fill: '#000',
                refX: '10%',
                refY: '-50%',
                textAnchor: 'middle',
                textVerticalAnchor: 'middle',
                label: ' '
            }
        },
        propHooks(metadata) {
            const { label, ...others } = metadata
            if (label) {
                ObjectExt.setByPath(others, 'attrs/text/text', label)
            }
            return others
        }
    }
}

function createArtifactNode() {
    return {
        inherit: 'rect',
        width: 200,
        height: 60,
        markup: [
            {
                tagName: 'path',
                selector: 'body'
            },
            {
                tagName: 'text',
                selector: 'label',
            }
        ],
        attrs: {
            body: {
                d: 'M 0 0 L 20 0 L 30 10 L 30 20 L 0 20 L 0 0 Z',
                strokeWidth: 1.5,
                stroke: '#000',
                fill: '#fff',
            },
            label: {
                fontSize: 14,
                fill: '#000',
                refX: '10%',
                refY: '-50%',
                textAnchor: 'middle',
                textVerticalAnchor: 'middle',
                label: ' '
            },
            propHooks(metadata) {
                const { label, ...others } = metadata
                if (label) {
                    ObjectExt.setByPath(others, 'attrs/text/text', label)
                }
                return others
            }
        }
    }
}

function createMessageNode() {
    return {
        inherit: 'rect',
        width: 200,
        height: 60,
        markup: [
            {
                tagName: 'path',
                selector: 'body'
            },
            {
                tagName: 'path',
                selector: 'body2'
            },
            {
                tagName: 'text',
                selector: 'label',
            }
        ],
        attrs: {
            body: {
                d: 'M 0 0 L 30 0 L 30 20 L 0 20 L 0 0 Z',
                strokeWidth: 1.5,
                stroke: '#000',
                fill: '#fff',
            },
            body2: {
                d: 'M 0 0 L 15 10 L 30 0 Z',
                strokeWidth: 1,
                stroke: '#000',
                fill: '#fff',
            },
            label: {
                fontSize: 14,
                fill: '#000',
                refX: '10%',
                refY: '-50%',
                textAnchor: 'middle',
                textVerticalAnchor: 'middle',
                label: ' '
            }
        },
        propHooks(metadata) {
            const { label, ...others } = metadata
            if (label) {
                ObjectExt.setByPath(others, 'attrs/text/text', label)
            }
            return others
        }
    }
}

function getServicePort() {
    return {
        groups: {
            left: {
                position: {
                    name: 'line',
                        args: {
                        start: {x: 0, y: '25%'},
                        end: {x:0, y: '75%'}
                    }
                },
                attrs: {
                    circle: {
                        r: 3,
                        magnet: true,
                        style: {
                            visibility: 'hidden',
                        },
                    }
                }
            },
            right: {
                position: {
                    name: 'line',
                        args: {
                        start: {x: '100%', y: '25%'},
                        end: {x: '100%', y: '75%'}
                    }
                },
                attrs: {
                    circle: {
                        r: 3,
                        magnet: true,
                        style: {
                            visibility: 'hidden',
                        },
                    }
                }
            },
            top: {
                position: {
                    name: 'line',
                        args: {
                        start: {x: 0, y: 0},
                        end: {x: '100%', y: 0}
                    }
                },
                attrs: {
                    circle: {
                        r: 3,
                        magnet: true,
                        style: {
                            visibility: 'hidden',
                        },
                    }
                }
            }
        },
        items: [
            {
                group: 'left'
            },
            {
                group: 'left'
            },
            {
                group: 'right'
            },
            {
                group: 'right'
            },
            {
                group: 'top'
            },
        ]
    }
}

function getCirclePort() {
    return {
        groups: {
            left: {
                position: 'left',
                attrs: {
                    circle: {
                        r: 3,
                        magnet: true,
                        style: {
                            visibility: 'hidden',
                        },
                    }
                }
            },
            right: {
                position: 'right',
                attrs: {
                    circle: {
                        r: 3,
                        magnet: true,
                        style: {
                            visibility: 'hidden',
                        },
                    }
                }
            },
            top: {
                position: 'top',
                attrs: {
                    circle: {
                        r: 3,
                        magnet: true,
                        style: {
                            visibility: 'hidden',
                        },
                    }
                }
            },
            bottom: {
                position: 'bottom',
                attrs: {
                    circle: {
                        r: 3,
                        magnet: true,
                        style: {
                            visibility: 'hidden',
                        },
                    }
                }
            }
        },
        items: [
            {
                group: 'left',
                args: {
                    dx: 1,
                    dy: 1,
                }
            },
            {
                group: 'right',
                args: {
                    dx: 3,
                    dy: 1,
                }
            },
            {
                group: 'bottom',
                args: {
                    dy: 3,
                }
            },
            {
                group: 'top',
                args: {
                    dy: 1,
                }
            },
        ]
    }
}

function getConsumerPort() {
    return {
        groups: {
            right: {
                position: 'right',
                attrs: {
                    circle: {
                        r: 3,
                        magnet: true,
                        style: {
                            visibility: 'hidden',
                        },
                    }
                }
            },
        },
        items: [
            {
                group: 'right'
            },
        ]
    }
}

const DragNode = {createSelfServiceNode,createCircleNode,createServiceNode,createProducerNode,createConsumerNode,createArtifactNode,createMessageNode,getServicePort,getCirclePort,getConsumerPort}
module.exports = DragNode
